import React, { Component } from 'react'
import Breadcrumb from '../base/Breadcrumb'
import { Input, MessageBox, Message } from 'element-react'
import DatePicker from '../base/DatePicker'
import Select from '../base/Select'
import Pagination from '../base/Pagination'
import {withRouter} from 'react-router-dom'
import {formatDate} from '../../common/js/index'

class goodsList extends Component {
  constructor (props) {
    super(props)
    this.state = {
      "totalElements": 0,
      "totalPages": 0,
      list: [
        {
          "category": "",
          "classify": 0,
          "endTime": "2018-03-10 01:46:06",
          "id": 0,
          "name": "",
          "repertory": 0,
          "startTime": "2018-03-10 01:46:06",
          "status": 0
        }
      ],
      // 查询参数
      category1: '',
      category2: '',
      category3: '',
      endTime: "",
      name: "",
      pageNo: 0,
      sellerName: "",
      size: 10,
      startTime: "",
      status: null,
      // 状态
      statusArr: [
        {
          label: '已上架',
          value: 1,
        },
        {
          label: '已下架',
          value: 0,
        }
      ],
      // 一级分类
      oneType: [],
      secondType: [],
      thirdType: []
    }
  }
  componentDidMount () {
    this.init()
    this.$ajax.selectOneType().then(res => {
      if (res.code === 200) {
        let oneTypeArr = res.data.map((a) => {
          a.label = a.name
          a.value = a.id
          return a
        })
        this.setState({oneType: oneTypeArr})
      }
    })
  }
  init () {
    this.selectProduct({pageNo: 0, size: 10})
  }
  search () {
    let data = {
      category1: this.state.category1,
      category2: this.state.category2,
      category3: this.state.category3,
      endTime: this.state.endTime,
      name: this.state.name,
      pageNo: 0,
      sellerName: this.state.sellerName,
      size: this.state.size,
      startTime: this.state.startTime,
      status: this.state.status
    }
    this.selectProduct(data)
  }
  selectProduct (data) {
    this.$ajax.selectProduct(data).then(res => {
      if (res.code === 200) {
        res.data.content.map(a => {
          a.startTime = formatDate(new Date(a.startTime))
          a.endTime = formatDate(new Date(a.endTime))
          // 判断商品是否在有效期内
          if (Date.now() > new Date(a.startTime).getTime() && Date.now() < new Date(a.endTime).getTime()) {
            a.valid = true
          } else {
            a.valid = false
          }
          return a
        })
        console.log(res.data.content)
        this.setState({
          list: res.data.content,
          totalElements: Number(res.data.totalElements),
          totalPages: res.data.totalPages
        })
      } else {
        Message.error(res.msg)
      }
    }).catch(() => {
      Message.error('网络错误')
    })
  }
  changePage (currentPage) {
    this.setState({pageNo: currentPage - 1}, () => {
      let data = {
        category1: this.state.category1,
        category2: this.state.category2,
        category3: this.state.category3,
        endTime: this.state.endTime,
        name: this.state.name,
        pageNo: this.state.pageNo,
        sellerName: this.state.sellerName,
        size: this.state.size,
        startTime: this.state.startTime,
        status: this.state.status
      }
      this.selectProduct(data)
    })
  }
  getTime (begin, end) {
    this.setState(
      {
        startTime: new Date(begin),
        endTime: new Date(end)
      }
    )
  }
  selectWay (val) {
    this.setState({status: val})
  }
  oneType (value) {
    // this.setState({category1: val})
    this.$ajax.selectOtherType(value).then(res => {
      if (res.code === 200) {
        let secondType = res.data.map((a) => {
          a.label = a.name
          a.value = a.id
          return a
        })
        this.setState({
          secondType: secondType,
          category1: value,
          category2: '',
          category3: '',
          thirdType: []
        })
      }
    })
  }
  secondType (value) {
    this.$ajax.selectOtherType(value).then(res => {
      if (res.code === 200) {
        let thirdType = res.data.map((a) => {
          a.label = a.name
          a.value = a.id
          return a
        })
        this.setState({
          thirdType: thirdType,
          category2: value,
          category3: ''
        })
      }
    })
  }
  thirdType (value) {
    this.setState({
      category3: value
    })
  }
  increase () {
    this.props.history.push({
      pathname: '/goodsCreate',
      state: { fromDashboard: true }
    })
  }
  goEdit (item) {
    this.props.history.push({
      pathname: `/goodsEdit/${item.id}`,
      state: { fromDashboard: true }
    })
  }
  goDetail (item) {
    this.props.history.push({
      pathname: `/goodsDetail/${item.id}`,
      state: { fromDashboard: true }
    })
  }
  goFormat (item) {
    sessionStorage.productName = item.name
    this.props.history.push({
      pathname: `/goodsFormatList/${item.id}`,
      state: { fromDashboard: true }
    })
  }
  // 弹窗
  changeStatus (item) {
    MessageBox.confirm('确认修改上下架状态?', '提示', {
      type: 'warning'
    }).then(() => {
      let data
      if (Number(item.status) === 1) {
        data = {id: item.id, status: 0}
      } else {
        data = {id: item.id, status: 1}
      }
      this.$ajax.changeStatus(data).then(res => {
        if (res.code === 200) {
          // window.location.reload()
          Message({
            type: 'success',
            message: '修改成功!'
          })
          this.init()
        } else {
          Message.error(res.msg)
        }
      }).catch(() => {
        Message.error('网络错误')
      })
    }).catch(() => {
      Message({
        type: 'info',
        message: '已取消修改'
      })
    })
  }
  render () {
    return (
      <div className="goods-list">
        <Breadcrumb data={['商品管理', '商品列表']}/>
        <div className="search">
          <div className="search-item">
            <div className="inputGroupList">
              <label className="inputLabelList">产品名称：</label>
              <Input placeholder="请输入产品名称" size="small" className="inputSmall" onChange={value => {this.setState({name: value})}}/>
            </div>
            <div className="inputGroupList">
              <label className="inputLabelList">上下架有效期：</label>
              <DatePicker getTime={this.getTime.bind(this)}/>
            </div>
          </div>
          <div className="search-item">
            <div className="inputGroupList">
              <label className="inputLabelList">卖家名称：</label>
              <Input placeholder="请输入卖家名称" size="small" className="inputSmall" onChange={value => {this.setState({sellerName: value})}}/>
            </div>
            <div className="inputGroupList">
              <label className="inputLabelList">状态：</label>
              <Select options={this.state.statusArr} select={this.selectWay.bind(this)}/>
            </div>
          </div>
          <div className="search-item">
            <div className="inputGroupList">
              <label className="inputLabelList">商品分类：</label>
              <div className="inline-marginR-20">
              <Select options={this.state.oneType} select={this.oneType.bind(this)} value={this.state.category1}/>
              <div className="width20"></div>
              <Select options={this.state.secondType} select={this.secondType.bind(this)} value={this.state.category2}/>
              <div className="width20"></div>
              
              <Select options={this.state.thirdType} select={this.thirdType.bind(this)} value={this.state.category3}/>
              </div>
            </div>
            <button type="button" className="btn btn-search" onClick={this.search.bind(this)}>搜索</button>
          </div>
        </div>
        <div><button type="button" className="btn btn-increase" onClick={this.increase.bind(this)}>新增</button></div>
        <table className="table">
          <tbody>
            <tr>
              <th>编号</th>
              <th>产品名称</th>
              <th>分类</th>
              <th>有效期</th>
              <th>sku库存总量</th>
              <th>sku的库存总数</th>
              <th>上下架状态</th>
              <th>操作</th>
            </tr>
            {
              this.state.list.map((a, index) => {
                return (
                  <tr key={index}>
                    <td>{a.id}</td>
                    <td>{a.name}</td>
                    <td>{a.category}</td>
                    <td>{a.startTime + ' 至 ' + a.endTime}</td>
                    <td>{a.classify}</td>
                    <td>{a.repertory}</td>
                    {
                      Number(a.status) === 1 ? <td>已上架</td> : <td>已下架</td>
                    }
                    <td>
                      <div><button className="btn btn-operate" onClick={this.goEdit.bind(this, a)}>编辑</button></div>
                      <div><button className="btn btn-operate" onClick={this.goDetail.bind(this, a)}>查看</button></div>
                      {
                        a.valid ? <div><button className="btn btn-operate" onClick={this.changeStatus.bind(this, a)}>修改上下架</button></div> : <div><button disabled className="btn btn-operate btn-operate-gray" onClick={this.changeStatus.bind(this, a)}>修改上下架</button></div>
                      }
                      <div><button className="btn btn-operate" onClick={this.goFormat.bind(this, a)}>规格</button></div>
                      <div><button className="btn btn-operate">评价</button></div>
                    </td>
                  </tr>
                )
              })
            }
          </tbody>
        </table>
        <Pagination total={Number(this.state.totalElements)} changePage={this.changePage.bind(this)}/>
      </div>
    )
  }
}

export default withRouter(goodsList)
